<!--头部菜单栏！！-->

<template>
 <nav class="app-topnav">
    <div class="container">
        <ul>
        <!--看作元素但不会解析成标签   v-if="profile.token"   v-else-->
     <template v-if="profile.token" >
<<<<<<< HEAD
      <li><RouterLink to="/Login"><i class="iconfont icon-user">123</i></RouterLink></li><!--{{profile.account}}-->
=======
      <li><RouterLink to="/Login"><i class="iconfont icon-user">{{profile.token}}</i></RouterLink></li><!--{{profile.account}}-->
>>>>>>> ff
      <li><RouterLink to="/">退出登录</RouterLink></li>
    </template>
      <template v-else >
      <li><a href="javascript:;">请先登录</a></li>
      <li><a href="javascript:;">免费注册</a></li>
    </template>
    <li><a href="javascript:;">我的订单</a></li>
    <li><a href="javascript:;">会员中心</a></li>
    <li><a href="javascript:;">帮助中心</a></li>
    <li><a href="javascript:;">关于我们</a></li>
    <li><a href="javascript:;"><i class="iconfont icon-phone"></i>手机版</a></li>
</ul>
    </div>

</nav>
</template>
<script>
import {computed} from 'vue'
import { useStore } from "vuex";
// console.log(useStore);
    export default{
        name:'AppTopnav',
        setup(){
            // 获取用户信息的登录请求才能控制切换导航菜单
            const store=useStore()
            // console.log(store);
            // const {profile}=store.state.user
            // 使用vuex中的状态
            const profile=computed(()=>{
                return store.state.user.profile
            })
            // console.log(profile.value);
            return {profile}

        }
    }
</script>
<style scoped lang="less">
.app-topnav {
  background: #333;
  ul {
    display: flex;
    height: 53px;
    justify-content: flex-end;
    align-items: center;
    li {
      a {
        padding: 0 15px;
        color: #cdcdcd;
        line-height: 1;
        display: inline-block;
        i {
          font-size: 14px;
          margin-right: 2px;
        }
        &:hover {
          color: @xtxColor;
        }
      }
    /*后面所有都被选择一样的设置 */
      ~ li {
        a {
          border-left: 2px solid #666;
        }
      }
    }
  }
}
/*
选择器作用：选择当前选择器后台的所有元素
 */
</style>